<template>
    <div>
        <van-nav-bar title="xx商城" fixed />
        <div style="height: 42px;"></div>
        <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" @click="tz"/>
        <lbt :images="imageList" imagewidth="200px" imageheight="180px"></lbt>
        <van-grid :column-num="4">
            <van-grid-item v-for="item in catitems" :icon="item.image_src" :text="item.name" />
            <van-grid-item v-for="item in catitems" :icon="item.image_src" :text="item.name" />
        </van-grid>
        <div class="djs" v-show="js">
            <b>京东秒杀</b>
            <span>倒计时：</span>
            <span>{{ time }}秒</span>
        </div>
        <div>
            <b>品牌好货</b>
            <img src="./img/qq.png" alt="">

        </div>





    </div>
</template>

<script setup>
import lbt from '@/components/lbt.vue';
const imageList = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
const tz=()=>{
    router.push('/home/search')
}
import { ref } from 'vue';
import { catitemsApi } from '@/api/api';
import router from '@/router';
let catitems = ref([])
catitemsApi().then(res => {
    console.log('导航数据', res)
    catitems.value = res.data.message
})
let js = ref(true)
let time = ref(10)
let timer
timer = setInterval(() => {
    time.value--
    if (time.value == 0) {
        clearInterval(time)
        js.value = false
    }
}, 1000)

</script>

<style lang="scss" scoped>
.djs {
    background: yellow;
}

span {
    color: red;

}

b {
    margin-right: 10px;
}
</style>